DEV WEB 09/02/2026

Lien vers le PDF de l’exercice

Exo 48

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script>
    let p=1;
    function clique()
    {
    if(p==1){
    p=0;
    let a=document.getElementById("houd")
    let b=a.childNodes[0];
    a.removeChild(b);

    }    
    else if(p==0){
        p=1;
        let a=document.getElementById("houd");
        a.insertBefore(document.createTextNode("Robert-Houdin").null)
    }
    }
</script>
<body>
    <p>
    Body
    </p>
    <Button onclick="clique();">Clique</button>
    <p id="houd">Robert-Hourdin</p>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Exo 49

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script>
    let p=1;
    function clique()
    {
    if(p==1){
    p="A";
    }
    else if(p=="A"){
        p="a";
    }
    else if (p=="a"){
        p=1;
    }
    document.getElementById("hout").setAttribute("type",p);
    }
</script>
<body>
    <p>
    Body
    </p>
    <Button onclick="clique();">Clique</button>
    <ol id="hout" type="1">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    </ol>

    


<p>Dernier</p>

</body>
</html>

Cours 51. contenteditable
Certains attributs sont dit héréditaires : la valeur qu’on leur donne dans une balise (nom balise : html, body,
p) est transmise aux enfants de cet élément. C’est le cas de contenteditable prenant la valeur true ou false,
qui permet à l’utilisateur de modifier les noeuds textes enfants. D’autres attributs ne le sont pas, comme src ou
id.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script>
    let p=1;
    function clique()
    {
    if(p==1){
    p="A";
    }
    else if(p=="A"){
        p="a";
    }
    else if (p=="a"){
        p=1;
    }
    document.getElementById("hout").setAttribute("type",p);
    }
</script>
<body>
    <p>
    Body
    </p>
    <Button onclick="clique();">Clique</button>
    <ol id="hout" type="1" contenteditables="true">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    </ol>

    


<p>Dernier</p>

</body>
</html>

Cours 59 styles

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script>
    let p=1;
    function clique()
    {
    if(p==1){
    p="A";
    }
    else if(p=="A"){
        p="a";
    }
    else if (p=="a"){
        p=1;
    }
    document.getElementById("hout").setAttribute("type",p);
    }
</script>
<body>
    <p>
    Body
    </p>
    <ol id="hout" type="1" contenteditables="false">
    <p style="border:solid  2px red;width:4in">Dernier</p>

</body>
</html>

command pour ajouter css d’autre fichier.css
<link rel="stylesheet" href="fichier.css">
`pour une boite

styles="border solid 1 px red;wifth:30%;height:20%"` ``

Différence entre span et div:-
un div est un conteneur qui occupe toute la largeur disponible et commence sur une nouvelle ligne mais un span est un conteneur dans le quelle texte reste sur la même ligne que le text autour de lui.